<template>
	<view class="container">
		<loading :show="loading_show"></loading>
		<customHead
			:isShowBackArrow="true"
			:title="opacity?'排行榜':''"
			titlePaddingLeft="30"
			@goback="goback"
			color="#fff"
			:style="{opacity: opacity}"
			:navi_background="`rgba(255, 56, 0, ${opacity})`"
		>
		</customHead>
		<view class="content_main">
			<view class="back_img">
				<image :src="swiperList[0].activityImgUrl" mode="aspectFill"></image>
			</view>
			<view class="content_box">
				<view class="content_item _fade" :style="{height: `${itemHeight}rpx`}" v-for="(item, index) in itemList" :key="index">
					<view class="content_goods_stand">
						<view class="content_goods_stand_top" @click="gotoRankingAll(item)">
							<view class="top_text">
								<view class="top_left">
									<text class="desc1 color">{{item.categoryName}}排行榜</text>
								</view>
								<view class="top_right">
									<text class="text">查看更多</text>
									<u-icon name="arrow-right" color="#565656"></u-icon>
								</view>
							</view>
						</view>
						<scroll-view scroll-y="true" scroll-x class="scroll" :show-scrollbar="true">
							<view class="goods_box">
								<view class="goods_item" @click="gotoGoodsDetail(item1.id)" v-for="(item1, index) in item.goodsList" :key="index">
									<view class="sort_icon" :class="[index<3?`back${index}`:'back']">
										<text class="top">TOP</text>
										<text class="text">{{index+1}}</text>
									</view>
									<view class="image">
										<image :src="item1.rotationImgsJson[0]" mode="aspectFill"></image>
									</view>
									<view class="goods_title">
										<text :style="{color: _temp_titleColor}">{{item1.goodsName}}</text>
									</view>
									<view class="price">
										<view class="" v-if="currentFirm.id">
											<span>￥</span>
											<text>
												{{item1.goodsPrice}}
											</text>
										</view>
										<text v-else class="desc_text" :style="{color: _temp_textColor}">建店看价格</text>
										<image class="image" @click.native.stop="addCart(item)" src="@/static/images/home/cart.png" mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPlugsShopCartByUserId,
		searchPlugsGoodCategoryList,
		searchPlugsGoodsByCategoryId,
		delPlugsShopCart,
		insertPlugsShopCart,
		searchPlugsHotGoodsList,
		searchHotGoodsList,
		getApplicationPlugsRecommendedList
	} from "@/tools/request/api.js"
	export default {
		data() {
			return {
				itemHeight: 560, // 列表每一项的高度 rpx
				contentTop: 300, // 内容距离顶部的距离 rpx
				contentTopPx: 0,
				opacity: 0,
				catePage: {
					page: 1,
					size: 5,
					totalPage: 0,
					hasNextPage: false,
				},
				categoryList: [],
				categoryItemIndex: 0,
				itemList: [],
				loading_show: false,
				refresher_show: false,
				swiperList: []
			};
		},
		onLoad () {
			this.initPage();
			this.getSwiperList();
		},
		methods: {
			gotoAddStore () {
				uni.navigateTo({
					url: '/subpack_my/myStore/myStore'
				})
			},
			goback () {
				uni.navigateBack();
			},
			gotoRankingAll (item) {
				uni.navigateTo({
					url: `/subpack_home/rankingListAll/rankingListAll?categoryId=${item.cateId}&categoryName=${item.categoryName}`
				})
			},
			gotoGoodsDetail (id) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				uni.navigateTo({
					url: `/subpack_category/goodsDetail/goodsDetail?id=${id}`
				})
			},
			addCart (item) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				this.addCartGoods(item);
			},
			initPage () {
				let sysInfo = uni.getSystemInfoSync();
				let pixelRatio = 750 / sysInfo.windowWidth;
				let itemHeightPx = this.itemHeight / pixelRatio;
				let contentTopPx = this.contentTop / pixelRatio;
				this.contentTopPx = contentTopPx;
				let windowHeight = sysInfo.windowHeight;
				let contentHeight = windowHeight - contentTopPx;
				let minNum = Math.ceil(contentHeight / itemHeightPx);
				this.catePage.size = minNum + 3; // 大多数设备每页能显示2-3项分类，再加3防止分页请求太频繁
				this.getCategoryList();
			},
			getSwiperList() {
				let data = {
					businessId: this.businessId,
					userServiceToken: this.userServiceToken
				}
				getApplicationPlugsRecommendedList(data).then(res => {
					if (res.code == 200) {
						let list = res.body;
						this.swiperList = list.filter(item => item.type == 'ranking');
					}
				})
			},
			// 获取商品分类列表
			async getCategoryList () {
				this.loading_show = !this.refresher_show;
				let data = {
					page: this.catePage.page,
					size: this.catePage.size,
					adminId: this.adminId,
					id: 143,
					keyword: '',
					businessId: this.businessId,
					userServiceToken: this.userServiceToken
				}
				let res = await searchPlugsGoodCategoryList(data);
				if (res.code != 200) return uni.$showMsg();
				let list = res.body.list;
				this.catePage.hasNextPage = res.body.hasNextPage;
				let itemList = [];
				list.forEach(async (item, index) => {
					let goodsList = await this.getGoodList(item.id.toString());
					itemList.push({
						cateId: item.id,
						categoryName: item.categoryName,
						goodsList: goodsList
					})
					this.sleep(50);
				})
				this.loading_show = false;
				this.refresher_show = false;
				this.itemList = itemList;
				
			},
			// 休眠
			sleep (numberMillis) {
				var now = new Date();
				var exitTime = now.getTime() + numberMillis;
				while (true) {
					now = new Date();
					if (now.getTime() > exitTime)
					return;
				}
			},
		
			// 获取热销商品列表
			async getGoodList (id) {
				let data = {
					page: 1,
					size: 5,
					businessId: this.businessId,
					goodsCategoryId: id
				};
				// let res = await searchHotGoodsList(data);
				let res = await searchPlugsHotGoodsList(data);
				if (res.code != 200) return uni.$showMsg();
				let list = res.body.list;
				list.forEach((item) => {
					if (item.rotationImgsJson) {
						item.rotationImgsJson = JSON.parse(item.rotationImgsJson);
					}
				})
				return list;
			},
			
		},
		onPageScroll (e) {
			if (e.scrollTop >= (this.contentTopPx - this.naviHeight)) {
				this.opacity = 1;
			} else {
				this.opacity = 0;
			}
		},
		// 下拉刷新
		onPullDownRefresh () {
			this.refresher_show = true;
			this.cartPage.page = 1;
			this.getCartList(true);
		},
		// 触底加载更多
		onReachBottom () {
			if (this.catePage.hasNextPagetPage) {
				this.catePage.page++;
				this.getCategoryList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		position: relative;
		
		.content_main{
			
			.back_img{
				width: 100%;
				height: 400rpx;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
			
			.content_box{
				width: 100%;
				
				.content_item{
					width: 100%;
					height: 560rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
					
					.content_goods_stand{
						padding: 30rpx 0;
						width: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						background-color: #fff;
						border-radius: 20rpx;
						padding-left: 20rpx;
						padding-right: 20rpx;
						box-sizing: border-box;
						
						.content_goods_stand_top{
							width: 100%;
							margin-bottom: 20rpx;
							
							.top_text{
								width: 100%;
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding: 0 20rpx;
								box-sizing: border-box;
								
								.top_left{
									display: flex;
									align-items: center;
									box-sizing: border-box;
									
									.desc1{
										font-size: 36rpx;
										padding-right: 20rpx;
									}
								
								}
								.top_right{
									display: flex;
									align-items: center;
									
									text{
										font-size: 26rpx;
										color: #565656;
									}
									
								}
								
							}
						}
						.scroll{
							white-space: nowrap;
							
							.goods_box{
								display: flex;
								margin-top: 20rpx;
								
								.goods_item{
									// padding: 0 15rpx;
									// display: flex;
									// flex-direction: column;
									// justify-content: space-between;
									// align-items: center;
									// position: relative;
									
									
									width: 33.33%;
									padding: 0 15rpx;
									box-sizing: border-box;
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									align-items: center;
									position: relative;
									
									.sort_icon{
										color: #fff;
										position: absolute;
										top: 0;
										left: 0;
										display: flex;
										flex-direction: column;
										align-items: center;
										padding: 6rpx 10rpx;
										border-radius: 15rpx;
										
										.top{
											font-size: 16rpx;
										}
										
										.text{
											font-size: 24rpx;
										}
									}
									.back0{
										background-image: linear-gradient(to bottom, #ff606b, #ff404d);
									}
									.back1{
										background-image: linear-gradient(to bottom, #FF9843, #FF5810);
									}
									.back2{
										background-image: linear-gradient(to bottom, #FFC54B, #FFAD4C);
									}
									.back{
										background-image: linear-gradient(to bottom, #30FABB, #14DA9B);
									}
									
									.image{
										width: 200rpx;
										height: 200rpx;
										
										image{
											width: 100%;
											height: 100%;
											border-radius: 10rpx;
										}
									}
									
									.goods_title{
										// width: 100%;
										// max-height: 3em;
										// white-space: normal;
										// display: -webkit-box;
										// -webkit-line-clamp: 2;
										// -webkit-box-orient: vertical;
										// overflow: hidden;
										// text-overflow: ellipsis;
										// line-height: 50rpx;
										// margin-top: 20rpx;
										
										width: 100%;
										margin-top: 20rpx;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
									}
									
									.price{
										width: 100%;
										margin-top: 20rpx;
										font-size: 30rpx;
										color: #FF0000;
										font-weight: bold;
										display: flex;
										justify-content: space-between;
										align-items: center;
										
										span{
											font-size: 30rpx;
										}
										.image{
											width: 50rpx;
											height: 50rpx;
										}
										.desc_text{
											font-size: 26rpx;
											color: #aaaaaa;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
